<template>
  <div class="login-container">
    <div class="top-header">
      <span>微信</span>
      <div class="icons">
        <i class="iconfont icon-shezhi"></i>
        <i class="iconfont icon-guanbi"></i>
      </div>
    </div>
    <div class="main-view">
      <img src="../../assets/imgs/home/avator.png" alt="">
      <p class="username">小明</p>
      <button class="btn" @click="goLogin" v-loading="loading">进入微信</button>
      <div class="tab-view">
        <a href="">切换账号</a>
        <a href="">仅仅传输文件</a>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import router from '@/router';
const loading = ref(false)
// Composition API 代码
//跳转
const goLogin = () => {
  loading.value = true

  // 1秒后跳转
  setTimeout(() => {
    router.push('/home')
    loading.value = false // 理论上这行不会执行，因为页面已经跳转了
  }, 1000)
}
//加载
</script>

<style lang="scss" scoped>
.login-container {
  .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;

    span {
      color: rgb(205, 205, 207);
    }

    .icons {
      display: flex;
      gap: 8px;
    }
  }

  .main-view {

    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 100px;
      height: 100px;
      border-radius: 8px;
    }

    .username {
      font-size: 18px;
      font-weight: bold;
    }

    .btn {
      width: 200px;
      background-color: rgb(7, 193, 96);
      color: white;
      padding: 8px;
      border-radius: 8px;
      border: none;
    }

    .tab-view {
      display: flex;
      gap: 28px;
      margin-top: 30px;

      a {
        color: rgb(107, 136, 171);
      }
    }
  }
}
</style>
